<template>
    <div class="app-container">
        <levelbar></levelbar>
        <div class="news-box" v-loading='loading'>
            <div class="news-title">
                <span>{{content.sTitle}}</span>
                <el-button type="text" class="btn-primary btn-details" @click="readDetails(content.pId)">阅读详情</el-button>
            </div>
            <div class="news-content">
                <div class="news-item">
                    <!-- <span class="note-css"></span> -->
                    <span class="title-level">时间：</span>
                    <span>{{content.sCreateTime}}</span>
                </div>
                <div class="news-item">
                    <!-- <span class="note-css"></span> -->
                    <span class="title-level">类型：</span>
                    <span>{{content.sType == '1'?'要闻':content.sType == '2'?'公告':content.sType == '3'?'资料下载':''}}</span>
                </div>
                <div class="news-item">
                    <!-- <span class="note-css"></span> -->
                    <span class="title-level">内容：</span>
                    <div class="news-list">
                        <!-- <div v-if="this.$route.params.state == '0'" class="img-box">
                            <img alt="图片" :src='content.sImg' />
                        </div> -->
                        <div class="panel-body" v-html="content.sUrl">
                        </div>
                    </div>
                </div>
                <div class="news-item" v-if="content.sFileAddress">
                    <!-- <span class="note-css"></span> -->
                    <span class="title-level">附件：</span>
                    <div class='file-link'>
                        <div class='filename'>
                            <img  v-if="suffix=='doc'|| suffix=='docx'" alt="" src="../../../images/noticeBoard/word@3x.png">
                            <img  v-if="suffix=='xlsx'|| suffix=='xls'" alt="" src="../../../images/noticeBoard/excle@3x.png">
                            <img  v-if="suffix=='ppt'|| suffix=='pptx'" alt="" src="../../../images/noticeBoard/PPT@3x.png">
                            <img  v-if="suffix=='zip'|| suffix=='rar'" alt="" src="../../../images/noticeBoard/library.png">
                            <img  v-if="suffix=='txt'" alt="" src="../../../images/noticeBoard/txt.png">
                            <img  v-if="suffix=='pdf'" alt="" src="../../../images/noticeBoard/pdf.png">
                            <a :href="content.sFileAddress">{{content.sFileName}}</a>
                        </div>
                    </div>
                </div>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="cancel">返 回</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Levelbar from '../../layout/Levelbar';
    import { seeDetails } from 'api/bulletinBoard';
    import { mapGetters } from 'vuex';

    export default {
        name: 'newsDetail',
        components: { Levelbar },
        data() {
            return {
                loading: false,
                content: {
                    sTitle: '',
                    pId: '',
                    sCreateTime: '',
                    sType: '',
                    sImg: '',
                    sUrl: '',
                    sFileAddress: '',
                    sFileName: ''
                },
                suffix: ''
            }
        },
        created() {
            this.seeDetailsFu();
        },
        computed: {
            ...mapGetters([
                'uid'
            ])
        },
        methods: {
            readDetails(readId) {
                this.$router.push({ path: `/home/readDetails/${readId}`});
                // this.$router.push({ name: '阅读详情'});
            },
            seeDetailsFu() {
                this.loading = true;
                seeDetails(this.$route.params.id).then(res => {
                    this.loading = false;
                    if (res.data.status == 200) {
                        this.content = res.data.content;
                        let fileName = res.data.content.sFileName;
                        let fileNameList = fileName.split('.');
                        this.suffix = fileNameList[fileNameList.length-1];
                    } else {
                        this.$message.error(res.data.errorMsg);
                    }
                }).catch(() => {
                    this.loading = false;
                });
            },
            // 取消
            cancel() {
                this.$router.go(-1)
            }
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    @import "../../../../static/tinymce/skins/lightgray/content.min.css";
    .app-container {
        position: relative;
        padding: 20px 20px 10px;
        $bgcolor: #fff;
        overflow: hidden;

        @mixin showTitle() {
            background: $bgcolor;
            box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
            -webkit-box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
        }

        .news-box {
            overflow: hidden;
            padding: 0px 50px 0;
            @include showTitle();
            .news-title {
                padding-top:8px;
                text-align: center;
                font-size: 18px;
                color: #333;
                line-height: 72px;
                font-weight: bold;
                font-family: Microsoft YaHei;
                border-bottom: 1px solid #ddd;
                .btn-details {
                    float: right;
                    padding-top: 50px;
                    font-weight: normal;
                }
            }
            .news-content {
                overflow: hidden;
                .news-item {
                    overflow: hidden;
                    margin-top: 30px;
                    margin-bottom: 15px;
                    font-size: 14px;
                    color: #333;                   
                    .note-css {
                        vertical-align: middle;
                        display: inline-block;
                        width: 4px;
                        height: 16px;
                        margin-right: 15px;
                        border-left: 4px solid #ff5e2c;
                    }
                    .title-level {
                        padding:0 16px;
                        height: 14px;
                        line-height: 14px;
                        border-left: 4px solid #ff5e2c;
                    }
                    .news-list {
                        margin-top: 20px;
                        max-width: 1000px;
                        overflow: hidden;
                        word-wrap: break-word;
                        margin-left: 26px;
                        .img-box {
                            margin-bottom: 10px;
                            overflow: hidden;
                            img {
                                max-width: 1000px;
                                height: auto;
                            }
                        }
                        .panel-body {
                            img {
                                max-width: 1000px;
                                height: auto;
                            }
                        }
                    }
                    .file-link {
                        width: 100%;
                        margin-bottom: 20px; 
                        margin-left: 26px;
                        .download {
                            border-top:1px solid #ddd;
                            font-size:14px;
                            padding-top:10px;
                            margin-bottom:10px;
                        }
                        .filename {
                            cursor:pointer;
                            color:#5677FC;
                            font-size:14px;
                            display: flex;
                            margin-top: 20px;
                            img {
                                height:40px;
                                width:40px;
                                margin-right:10px;
                            }
                            a {
                                padding-top: 10px;
                            }
                        }
                    }
                }
                .dialog-footer {
                    text-align: center;
                    padding: 30px 0;
                }
            }
        }
    }
</style>